<template>
  <div class="event-manage-page">
    <!-- 添加通用页头 -->
    <PageHeader title="事件管理" :showLeftButton="false" />
    <div class="content">
      <PullRefresh @refresh="onRefresh">
      
      <!-- 搜索框 -->
      <el-input
        v-model="searchText"
        placeholder="搜索事件"
        clearable
        style="padding: 1rem;"
      ></el-input>
      
      <!-- 卡片列表 -->
      <div class="event-cards">
        <!-- 加载状态 -->
        <div v-if="loading" class="loading-state">
          <el-skeleton :rows="3" animated />
        </div>
        
        <!-- 事件列表 -->
        <el-card
          v-else
          v-for="event in filteredEvents"
          :key="event.id"
          class="event-card"
          :class="`event-type-${event.type}`"
        >
          <div class="event-header">
            <h3 class="event-title">{{ event.title }}</h3>
            <span class="event-type-tag">{{ getEventTypeLabel(event.type) }}</span>
          </div>
          
          <div class="event-info">
            <div class="event-date">
              <span class="info-label">日期：</span>
              <span class="info-value">{{ event.date }}</span>
            </div>
            <div class="event-description">
              <span class="info-label">描述：</span>
              <span class="info-value">{{ event.description }}</span>
            </div>
          </div>
          
          <div class="event-actions">
            <el-button size="small" @click="viewEvent(event.id)">查看详情</el-button>
            <el-button size="small" type="primary" @click="editEvent(event)">编辑</el-button>
          </div>
        </el-card>
        
        <!-- 空状态提示 -->
        <div v-if="filteredEvents.length === 0" class="empty-state">
          <el-empty description="暂无事件" />
        </div>
      </div>
      </PullRefresh>
    </div>
  </div>
</template>

<script>
import PageHeader from '../components/PageHeader.vue'
import PullRefresh from '../components/PullRefresh.vue'
import { getAllEvents } from '../services/api.js'
export default {
  name: 'EventManagePage',
  components: {
    PageHeader,
    PullRefresh
  },
  data() {
    return {
      searchText: '',
      events: [],
      loading: false,
      eventTypes: {
        education: '教育经历',
        career: '职业发展',
        family: '家庭生活',
        health: '健康状况',
        travel: '旅行经历',
        hobby: '兴趣爱好',
        social: '社交活动',
        other: '其他事件'
      }
    }
  },
  computed: {
    filteredEvents() {
      if (!this.searchText) return this.events
      return this.events.filter(event => 
        event.title.toLowerCase().includes(this.searchText.toLowerCase()) ||
        event.description.toLowerCase().includes(this.searchText.toLowerCase())
      )
    }
  },
  mounted() {
    // 组件挂载时获取事件数据
    this.fetchEvents()
  },
  methods: {
    getEventTypeLabel(type) {
      return this.eventTypes[type] || '未知类型'
    },
    viewEvent(id) {
      this.$router.push(`/event-detail/${id}`)
    },
    editEvent(event) {
      this.$router.push({
        path: '/add-event-info',
        query: { edit: true, id: event.id, type: event.event_type || event.type }
      })
    },
    
    // 从后端获取事件数据
    async fetchEvents() {
      try {
        this.loading = true
        // 调用API获取所有事件
        const eventData = await getAllEvents()
        
        // 处理返回的数据，确保字段映射正确
        if (Array.isArray(eventData)) {
          // 将后端返回的event_type字段映射为前端需要的type字段
          this.events = eventData.map(event => ({
            ...event,
            type: event.event_type || event.type
          }))
          console.log('成功获取事件数据:', this.events)
        }
      } catch (error) {
        console.error('获取事件数据失败:', error)
        this.$message.error('获取事件数据失败，请重试')
      } finally {
        this.loading = false
      }
    },
    
    // 下拉刷新回调
    async onRefresh() {
      try {
        await this.fetchEvents()
        this.$message.success('事件列表已刷新')
      } catch (error) {
        console.error('刷新事件数据失败:', error)
        this.$message.error('刷新失败，请重试')
      }
    }
  }
}
</script>

<style scoped>
.event-manage-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 60px;
  width: 100%;
}

.content {
  width: 100%;
  margin: 0;
  height: calc(100vh - 60px); /* 假设页头高度为60px */
  overflow: hidden;
}

.content h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: #333;
}

/* 卡片列表容器 */
.event-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

/* 单个事件卡片 */
.event-card {
  margin-bottom: 0;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.event-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 卡片头部 */
.event-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.event-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
  margin: 0;
  flex: 1;
  margin-right: 0.75rem;
}

/* 事件类型标签 */
.event-type-tag {
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  color: #fff;
}

/* 不同类型的标签颜色 */
.event-type-education .event-type-tag { background-color: #409eff; }
.event-type-career .event-type-tag { background-color: #67c23a; }
.event-type-family .event-type-tag { background-color: #e6a23c; }
.event-type-health .event-type-tag { background-color: #f56c6c; }
.event-type-travel .event-type-tag { background-color: #909399; }
.event-type-hobby .event-type-tag { background-color: #c06c84; }
.event-type-social .event-type-tag { background-color: #5f76e8; }
.event-type-other .event-type-tag { background-color: #909399; }

/* 事件信息部分 */
.event-info {
  margin-bottom: 1rem;
}

.event-date,
.event-description {
  display: flex;
  margin-bottom: 0.5rem;
}

.event-description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.info-label {
  font-weight: 500;
  color: #666;
  margin-right: 0.5rem;
  min-width: 50px;
}

.info-value {
  color: #333;
  flex: 1;
}

/* 操作按钮区域 */
.event-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #ebeef5;
}

/* 空状态样式 */
.empty-state {
  padding: 3rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 加载状态样式 */
.loading-state {
  padding: 1rem;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 1rem;
}

/* 响应式调整 */
@media (min-width: 768px) {
  .event-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
  }
  
  .event-title {
    font-size: 1.1rem;
  }
}
</style>